<template>
     <n-divider>自定义组件使用v-model实现双向绑定</n-divider>
     <div class="flex-b">
          <div>
              父组件, {{count}}
          </div>
          <n-divider style="width:200px"  >分割线</n-divider>
          <div>
               <Children v-model:count="count"></Children>
          </div>
     </div>
     <div style="color:aquamarine">
          <h3>和子父组件组件通讯的区别是，父组件不必在写接收子组件的$emit事件来改变值，直接v-model实现了组件内的值双向绑定</h3>
     </div>
</template>
    
<script setup lang='ts'>
import { ref } from "@vue/reactivity";
import Children from './Children.vue'
const count = ref(0)
</script>
    
<style scoped>
.flex-b{
     display: flex;
     justify-content: center;
}
</style>